import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'
import store from '../store';
import { changeInputAction, addItemAction, deleteItemAction } from "../store/actionCreators"

const data = [
    '早8点开晨会，分配今天的开发工作',
    '早9点和项目经理作开发需求讨论会',
    '晚5:30对今日代码进行review'
]

class TodoList extends Component {
    constructor(props) {
        super(props)
        //关键代码-----------start
        this.state = store.getState();
        //关键代码-----------end
        this.changeInputValue = this.changeInputValue.bind(this);
        this.storeChange = this.storeChange.bind(this);
        //关键代码-----------start
        this.clickBtn = this.clickBtn.bind(this);
        //关键代码-----------end
        store.subscribe(this.storeChange); //订阅Redux的状态
    }
    render() {
        return (
            <div style={{ margin: '10px' }}>
                <div>
                    <Input placeholder={this.state.inputValue} style={{ width: '250px', marginRight: '10px' }}
                        //---------关键代码----start
                        onChange={this.changeInputValue}
                    //---------关键代码----end
                    />
                    <Button type='primary' onClick={this.clickBtn}>增加</Button>
                </div>
                <div style={{ marginTop: '10px', width: '320px' }}>
                    <List
                        size="small"
                        header={<div>Header</div>}
                        footer={<div>Footer</div>}
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item, index) => <List.Item onClick={this.deleteItem.bind(this, index)}>{item}</List.Item>}
                    />
                </div>
            </div>
        );
    }
    storeChange() {
        this.setState(store.getState());
    }
    // 表单输入
    changeInputValue(e) {
        const action = changeInputAction(e.target.value);
        store.dispatch(action);
    }
    // 添加
    clickBtn() {
        const action = addItemAction();
        store.dispatch(action);
    }
    // 删除
    deleteItem(index) {
        const action = deleteItemAction(index);
        store.dispatch(action);
    }
}

export default TodoList;
